<template>
  <div class="commentHot">
    <header>
      <div class="left">
        <span class="back" @click.stop="back()"></span>
        <span class="count">精彩评论({{comment_hot_data.total}})</span>
      </div>
      <div class="right">
        <span class="share"></span>
      </div>
    </header>
    <main>
      <div class="commentList">
        <div class="hotComment" v-if="comment_hot_data.hotComments">
          <!--mescroll滚动区域的基本结构-->
          <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <v-comment-card
              v-for="(item,index) in dataList"
              :key="index"
              :data="item"
              @isliked="isliked"
              @click.native="pop(item)"
            ></v-comment-card>
          </mescroll-vue>
          <div id="empty_box"></div>
        </div>
      </div>
    </main>
    <v-comment-textarea v-show="isReply" ref="commentTextarea"></v-comment-textarea>
    <VCommentPop
      v-show="isCommentPop"
      @isDisplay="isDisplay"
      :pop_data="pop_data"
      @reply="reply"
      @copyEmit="copyEmit"
    ></VCommentPop>
  </div>
</template>
<script>
import vCommentCard from "@/components/comment_card";
import vCommentTextarea from "@/components/comment_textarea";
import VCommentPop from "@/components/comment_pop";
import MescrollVue from "mescroll.js/mescroll.vue";
import { mapState } from "vuex";
export default {
  components: {
    vCommentCard,
    vCommentTextarea,
    VCommentPop,
    MescrollVue // 注册mescroll组件
  },
  data() {
    return {
      isReply: false,
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        use: false
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 20 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看 这就是为什么无更多数据有时候不显示的原因
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "empty_box", //父布局的id (1.3.5版本支持传入dom元素)
          icon: require("../images/b_5.png"), //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      dataList: [], // 列表数据
      isCommentPop: false,
      pop_data: {},
      prompt_msg: "",
      prompt_flag: false
    };
  },
  computed: {
    ...mapState("song_detail", ["song_data", "song_data_flag"]),
    ...mapState("comment_hot", ["comment_hot_data"])
  },
  created() {
    this.getCommentHotData();
  },
  methods: {
    // 复制评论成功
    copyEmit() {
      this.prompt_msg = "已复制";
      this.prompt_flag = true;
      setTimeout(() => {
        this.prompt_flag = false;
        this.prompt_msg = "";
      }, 1000);
    },
    // 评论弹出框子组件控制父组件的子组件vCommentTextarea的聚焦事件
    reply() {
      this.isReply = true;
      this.$refs.commentTextarea.$refs.textarea.focus();
    },
    // 评论弹出框子组件控制父组件的子组件自己的隐藏事件
    isDisplay() {
      this.isCommentPop = false;
    },
    // 点击出现评论弹出框
    pop(item) {
      this.pop_data = item;
      this.isCommentPop = true;
    },
    // 子组件点赞改变父组件值
    isliked({ liked, data }) {
      this.$set(data, "liked", liked);
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 联网请求
      this.$store
        .dispatch("comment_hot/getCommentHot", {
          id: this.$route.query.id,
          offset: page.num,
          limit: page.size,
          type: 0
        })
        .then(
          data => {
            // 请求的列表数据
            let arr = data.hotComments;
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.dataList = [];
            // 把请求到的数据添加到列表
            this.dataList = this.dataList.concat(arr);

            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length);
            });
          },
          data => {
            // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
          }
        );
    },
    // 获取热门评论数据
    getCommentHotData() {
      this.$store.dispatch("comment_hot/getCommentHot", {
        id: this.$route.query.id,
        type: 0,
        offset: 1,
        limit: 15
      });
    },
    // 获取歌曲详情
    getSongData() {
      this.$store.dispatch("song_detail/getSongData", {
        ids: this.$route.query.id
      });
    },
    // 返回上一页
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style>
.commentHot .mescroll-empty .empty-icon {
  margin: auto;
}
</style>
<style lang="scss" scoped>
.commentHot {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 1rem;
    overflow: hidden;
    line-height: 1rem;
    padding: 0 0.2rem;
    .left {
      float: left;
      span {
        display: inline-block;
        vertical-align: middle;
      }
      span.back {
        background: url(../images/axj.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        margin-right: 0.2rem;
      }
      span.count {
        color: #333;
        font-size: 0.36rem;
        font-weight: 900;
      }
    }
    .right {
      float: right;
      span {
        display: inline-block;
        vertical-align: middle;
      }
      span.share {
        background: url(../images/l.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
      }
    }
  }
  main {
    flex: 1;
    overflow-y: auto;
    .commentList {
      background-color: #f5f5f5;
      padding-top: 0.2rem;
      .hotComment {
        background-color: #fff;
        .top {
          background-color: #fff;
          font-size: 0.32rem;
          font-weight: 900;
          color: #333;
          line-height: 1rem;
          text-align: left;
          padding: 0 0.3rem;
          span {
            display: inline-block;
            font-size: 0.26rem;
            font-weight: normal;
            color: #999;
          }
        }
      }
    }
  }
}
</style>